<template>
  <div class="postcard">
    <van-nav-bar
      :title="titlename"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group inset class="contact-info">
      <van-cell
        icon="user-circle-o"
        title="姓名"
        value="梨花醉晚风"
        style="text-align: left"
      />
      <van-cell
        icon="phone-o"
        title="电话"
        value="17882826897"
        style="text-align: left"
      />
      <van-cell
        icon="envelop-o"
        title="邮箱"
        value="1442301691@qq.com"
        style="text-align: left"
      />
      <van-cell
        icon="eye-o"
        title="Gitee"
        value="https://gitee.com/yang-bangdong/community"
        style="text-align: left"
      />
    </van-cell-group>
    <div class="backimg">
      <img
        src="../assets/header.jpg"
        style="width: 100%; height: 300px"
        alt=""
      />
      <img
        src="../assets/background.jpg"
        alt=""
        style="width: 100%; height: 600px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { showConfirmDialog } from "vant";
const onClickLeft = () => history.back();
onMounted(() => {});

onUnmounted(() => {});
</script>

<style>
.postcard {
  background: #f4f4f4; /* 浅灰色背景，模拟明信片的纸质感 */
  border: 1px solid #ddd; /* 边框增加立体感 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
  width: 90vw; /* 设定明信片的宽度 */
  padding: 20px; /* 内边距，增加内容与边框的距离 */
  border-radius: 8px; /* 圆角边框，更加柔和 */
  text-align: center; /* 文本居中 */
}

.contact-info {
  width: 95%;
  margin-left: 0px;
  margin-top: 15px;
  background: white; /* 联系信息区域的白色背景 */
  padding: 10px; /* 联系信息区域的内边距 */
  border-radius: 4px; /* 联系信息区域的圆角边框 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 轻微阴影效果 */
}

.van-cell {
  font-size: 16px; /* 增大字体大小，提高可读性 */
  color: #333; /* 字体颜色，深灰色更加清晰 */
}

.van-cell-title {
  font-weight: bold; /* 标题字体加粗 */
}

.van-cell-value {
  color: #666; /* 值（如姓名、电话等）的字体颜色，浅灰色 */
}
.backimg {
  margin-top: 15px;
}
</style>